<template>
    <div class="direct">
        <div class="demo-input-suffix" style="margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinTitle" @change="isShowDirectTable">显示垃圾桶名称标签</el-checkbox>
        </div>
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinPicture" @change="isShowDirectTable">显示垃圾桶图片</el-checkbox>
        </div>
        <div class="allmap" id="allmap"></div>
        <div class="tree">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <el-form
            title="详细信息"
            id="VillageDetail"
            :visible.sync="VillageDetail"
            class="dialogwhole"
            hidden="true"
        >
            <div>单位名称：天塔街道</div>
            <div>地址：</div>       
            <hr />
            <div>管理单位：天塔街道</div>
            <div>联系人：王雪</div>
            <div>联系电话：15022033221</div>
            <hr />
            <div>餐厨垃圾桶：4</div>
            <div>可回收垃圾桶：4</div>
            <div>有害垃圾桶：2</div>
            <div>其他垃圾桶：4</div>
        </el-form>
    </div>
</template>
<script>

export default {
  data () {
    return {
      data: [{
        label: '餐饮单位',
        longitude: '117.191866',
        latitude: '39.087246',
        children: [{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '华特美酒楼'          
        },{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '全聚德'          
        },{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '宝轩鱼府'          
        },{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '狗不理包子'          
        },{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '新煮意'          
        }]
      },{
        label: '公共机关',
        longitude: '117.191866',
        latitude: '39.087246',
        children: [{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '天津市公共法律服务中心'          
        },{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '天津市公共法律服务中心'          
        },{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '天津市公共法律服务中心'          
        },{
          longitude: '117.192195',
          latitude: '39.087718',
          label: '天津市公共法律服务中心'          
        }],
      
      
      }],
      defaultProps: {
        children: 'children',
        longitude: 'longitude',
        latitude: 'latitude',
        label: 'label'
      },
      checked: true,
      map: '',
      scopeCircle: '',
    }
  },
  mounted () {
    this.initMap();
    this.addMarker_Person();
  },
  methods: {
    handleNodeClick (data) {

      // document.getElementById('span1').innerText = "总人数：" + data.sumPerson;
      // document.getElementById('span2').innerText = "总户数：" + data.sumHome;
      // document.getElementById('span3').innerText = "总楼数：" + data.sumBuilding;
      // if (data.sumArea) {
      //   document.getElementById('span5').innerText = "社区数量：" + data.sumArea;
      // } else {
      //   document.getElementById('span5').innerText = "";
      // }
      // if (data.sumDis) {
      //   document.getElementById('span4').innerText = "小区数量：" + data.sumDis;
      // } else {
      //   document.getElementById('span4').innerText = "";
      // }
      if(data.children){
        document.getElementById("VillageDetail").setAttribute("hidden", true);
      }else{
        document.getElementById("VillageDetail").removeAttribute("hidden", true);
      }
      if (data.longitude) {
        setMapCenterAtWorkerMarker(data);
        // document.getElementById("mapIFRAME").contentWindow.setMapCenter(data.longitude, data.latitude);
        // document.getElementById("mapIFRAME").contentWindow.addCircle(data.longitude, data.latitude);
      }

    },
    initMap () {
      var City = '天津'
      this.map = new BMap.Map('allmap')
      var point = new BMap.Point(117.612137, 39.043002) // 创建点坐标
      this.map.setCurrentCity(City)
      this.map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    },
    getDetails (row) {
      console.log(row)//此时就能拿到整行的信息
      this.setMapCenterAtWorkerMarker(row)
    },
    setMapCenterAtWorkerMarker (row) {
      this.map.centerAndZoom(new BMap.Point(row.longitude, row.latitude), 18)
    },
    addMarker_Person (row) {
      // new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
      var bounds = this.map.getBounds();

      var sw = bounds.getSouthWest();
      var ne = bounds.getNorthEast();
      var lngSpan = Math.abs(sw.lng - ne.lng);
      var latSpan = Math.abs(ne.lat - sw.lat);
      for (var i = 0; i < 25; i++) {
        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        var myIcon = new BMap.Icon("https://www.easyicon.net/api/resizeApi.php?id=1284995&size=32", new BMap.Size(32, 35));
        //var myIcon = new BMap.Icon(require("../src/assets/img/img.jpg"), new BMap.Size(32,35));
        var marker = new BMap.Marker(point, { icon: myIcon });
        this.map.addOverlay(marker);
      }
    }
  },
}
</script>
<style scoped>
hr {
    margin-top: 20px;
    margin-bottom: 15px;
}
.allmap {
    width: 100%;
    height: 96%;
    border: 1px solid darkgrey;
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    margin: auto;
}
.direct,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
.tree {
    position: absolute;
    left: 10px;
    top: 40px;
    z-index: 555;
    width: 280px;
    height: 80%;
    opacity: 0.8;
    background: #fff;
}
.tree p {
    color: #60b6a1;
    font-size: 120%;
    margin-left: 10px;
    font-weight: 600;
}
.el-tree {
    color: #000;
    font-weight: 600;
    height: 100%;
    background: #fff;
}
.rightinformation {
    z-index: 555;
    position: absolute;
    right: 10px;
    top: 50px;
    background: #000;
    opacity: 0.6;
    color: #fff;
    padding: 15px 20px;
    font-size: 15px;
}
.rightinformation > p {
    width: 100%;
}
.demo-input-suffix {
    float: left;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
}
.dialogwhole {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    height: 300px;
    font-size: 15px;
    opacity: 0.8;
    background: #fff;
    padding: 15px;
}
</style>